<template>
  <div class="container">
    <div class="add-group-btn">
      <button class="weui-btn" @click="isShow = true" type="primary">+创建新小组</button>
    </div>

    <div class="group">
      <img class="img" src="../../../static/images/default_image_family.png">
      <p class="new">8</p>
      <p class="group-title">
        相亲一家人
        <span class="people-num">7</span>
        <img class="people-ico" src="../../../static/images/ic_tabs_usercenter_normal.png">
      </p>
    </div>

    <div class="weui-mask" v-if="isShow"></div>
    <div class="weui-actionsheet" v-if="isShow">
      <div class="weui-flex group-type">
        <navigator url="/pages/groupDetail/main" class="weui-flex__item">
          <img class="icon" src="../../../static/images/creat_group_class@2x.png">
          <div class="placeholder">班级阅读小组</div>
        </navigator>
        <div class="weui-flex__item">
          <img class="icon" src="../../../static/images/creat_group_family@2x.png">
          <div class="placeholder">家庭阅读小组</div>
        </div>
        <div class="weui-flex__item">
          <img class="icon" src="../../../static/images/creat_group_adit@2x.png">
          <div class="placeholder">自定义小组</div>
        </div>
      </div>
      <div class="weui-actionsheet__action" @click="isShow = false">
        <div class="weui-actionsheet__cell">取消</div>
      </div>
    </div>
    <tab-bar :tabConstant="'GROUP'"></tab-bar>
  </div>
</template>

<script>
  import tabBar from '../../components/tabbar'

  export default {
    data () {
      return {
        userInfo: {},
        isShow:false
      }
    },
    components: {
      tabBar
    },
    onShow () {
      console.log(`GROUP`)
    },
    methods: {
      open() {
        wx.showActionSheet({
          itemList: ['A', 'B', 'C'],
          success: function (res) {
            console.log(res.tapIndex)
          }
        });
      }
    },

  }
</script>

<style scoped lang="less">
  .weui-actionsheet{
    height:312rpx;
    width:100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999999999999999999999;
    animation:myfirst .5s;
    -moz-animation:myfirst .5s; /* Firefox */
    -webkit-animation:myfirst .5s; /* Safari and Chrome */
    -o-animation:myfirst .5s; /* Opera */
    .group-type{
      width:100%;
      height:200rpx;
      border-bottom: 12rpx solid #EFEFEF;
      .weui-flex__item{
        text-align: center;
        .icon{
          width:96rpx;
          height:96rpx;
          margin-top: 38rpx;
        }
        .placeholder{
          color: #999999;
          font-size:26rpx;
        }
      }
    }
    .weui-actionsheet__cell{
      line-height: 100rpx;
      text-align: center;
    }
  }
  .add-group-btn{
    width:100%;
    position: fixed;
    top:40%;
    left:0;
    z-index:1;
  }
  .weui-mask{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 999999999999999;
    background-color: rgba(0,0,0,0.5);
  }
.weui-btn{
  background-color: #1387FF;
  width:45%;
}
  .group{
    width:686rpx;
    height:300rpx;
    margin-top:32rpx;
    border-radius:16rpx;
    overflow: hidden;
    position: relative;
    border:1px solid #000;
    .img{
      width:686rpx;
      position: absolute;
      top:-135rpx;
      left:0;
      z-index: -1;
      //height:212rpx;
    }
    .group-title{
      width:622rpx;
      height:88rpx;
      padding: 0 32rpx;
      font-size:28rpx;
      line-height: 88rpx;
      background-color: #fff;
      color:#000;
      font-weight:bold;
      position: absolute;
      bottom: 0;
      left: 0;
      .people-ico{
        width:37rpx;
        height:37rpx;
        float: right;
        margin-top: 25rpx;
      }
      .people-num{
        float:right;
        color:#999;
        margin-left: 6rpx;
        font-weight: normal;
      }
    }
    .new{
      width:40rpx;
      height:40rpx;
      position: absolute;
      top:20rpx;
      right:20rpx;
      z-index: 2;
      border-radius: 50%;
      background-color: #1387FF;
      font-weight: 400;
      line-height: 40rpx;
      font-size: 26rpx;
      color:#fff;
      text-align: center;

    }
    @keyframes myfirst
    {
      from{bottom:-312rpx;}
      to{bottom:0;}
    }

/*    @-moz-keyframes myfirst !* Firefox *!
    {
      from{bottom:-312rpx;}
      to{bottom:0;}
    }*/

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
      from{bottom:-312rpx;}
      to{bottom:0;}
    }
/*
    @-o-keyframes myfirst !* Opera *!
    {
      from{bottom:-312rpx;}
      to{bottom:0;}
    }*/
  }
</style>
